
<template>
    <div
        ref="editor"
        class="Editor"
    >
    </div>
</template>

<script>
    import E from 'wangeditor';
    import { HOST } from 'assets/js/config';
    export default {
        name: 'Editor',
        data () {
            return {
                editor: {}, // 实例话之后的 editor
                editorContent: '', // 富文本内容
                editorContentInnerText: '' // 富文本中的内容的纯文本
            };
        },
        mounted () {
            this.editor = new E(this.$refs.editor);
            this.editor.customConfig = {
                uploadImgServer: `${ HOST }/system/upload/articleImagesUpload`, // 上传图片路径
                uploadImgMaxLength: 10, // 限制一次最多能传几张图片
                onchange: (html) => {
                    this.editorContent = html;
                    this.editorContentInnerText = this.editor.$textElem[0].innerText;
                }
            };
            this.editor.create();
        },
        methods: {
            /**
             * 获取编辑内容
             */
            getEditContent () {
                return this.editorContent;
            },
            /**
             * 获取编辑内容的纯文本信息
             */
            getEditContentInnerText () {
                return this.editorContentInnerText;
            },
            /**
             * 设置内容
             * @param {String} content 富文本内容
             * @param {String} textContent 纯文本内容
             */
            setHtml (content, textContent) {
                this.editor.txt.html(content);
                this.editorContent = content;
                this.editorContentInnerText = textContent;
            },
            /**
             * 清空内容
             */
            clearText () {
                this.editor.txt.clear();
            }
        }
    };
</script>

<style lang="less" scoped>
// /deep/.w-e-text-container {
//     min-height: 300px!important;
// }
</style>
